<template>
  <div class="mainContainer" :style="mainStyle">
    <el-card class="card" shadow="never" ref="card">
      <div slot="header" class="header" v-show="showHeader">
        <span>{{ title }}</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click.stop="more"
          >
          更多
          <img :src="moreImg" alt="">
          </el-button
        >
      </div>
      <div class="container">
        <!-- <Table2el
          :data="tableData"
          style="width: 100%"
          height="372"
          border
          v-loading="tableData.length === 0"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        > -->
        <Table2el
          border
          style="width: 100%"
          :data="tableData"
          :height="tabelHeight"
          :header-cell-style="{
            background: '#E0EAF5',
            height: '32px !important',
          }"
          :header-row-style="{ height: '16px' }"
        >
        <slot>
          <el-table-column prop="enterpriseName" label="企业名称" align="center" />
          <el-table-column prop="alarmContent" label="报警内容" align="center" />
          <el-table-column prop="alarmTime" label="报警时间" align="center" />
          <el-table-column prop="alarmEndTime" label="消警时间" align="center" />
          <el-table-column prop="alarmEndPerson" label="消警人" align="center" />
          <el-table-column prop="alarmEndExplain" label="消警说明" align="center" />
        </slot>
        </Table2el>
      </div>
    </el-card>
    <Pagination2el
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
    />
  </div>
</template>

<script>
import Table2el from "@/components/table2el/table2el.vue";
import Pagination2el from "@/components/pagination2el/pagination2el.vue";
export default {
  name: "cardTable",
  components:{
    Table2el,
    Pagination2el
  },
  props: {
    height:{
      type: [String, Number],
      default: 'auto'
    },
    showHeader:{
      type:Boolean,
      default:true
    },
    moreImg: {
      type: String,
      default: require("../../assets/images/enterprisePersonnelPositionManage/more.png")
    },
    title: {
      type: String,
      default: "信息快报",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    pageOption: {
      type: Object,
      default: () => {
        return {
          pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
          layout: "total, sizes, prev, pager, next, jumper",
          currentPage: 1,
          pageSize: 1,
          total: 0,
        };
      },
    },
    mainMaxHeight:{
      type: Number,
      default: 300
    }
  },
  watch: {
    showHeader: {
      handler: function (val) {
        this.$nextTick(()=>{
          try{
            let header = this.$refs.card.$el.querySelector('.el-card__header');
            header.style.display = val ? '' : 'none';
          }catch(err){
            console.warn(err)
          }
        })
      },
      deep: true,
      immediate:true
    },
    data: {
      handler: function (val) {
        this.tableData = val;
      },
      deep: true,
    },
    pageOption: {
      handler: function (val) {
        this.pageSizes = val.pageSizes;
        this.layout = val.layout;
        this.currentPage = val.currentPage;
        this.pageSize = val.pageSize;
        this.total = val.total;
      },
      deep: true,
    },
  },
  data(){
    return {
      tableData: [],
      pageSizes: [],
      layout: "",
      currentPage: 1,
      pageSize: 1,
      total: 0,
    }
  },
  methods: {
    handleSizeChange() {
      this.$emit("sizeChange", ...arguments);
      this.$emit(
        "update:pageOption",
        Object.assign(this.pageOption, { pageSize: arguments[0] })
      );
    },
    handleCurrentChange() {
      this.$emit("currentChange", ...arguments);
      this.$emit(
        "update:pageOption",
        Object.assign(this.pageOption, { currentPage: arguments[0] })
      );
    },
    more(event) {
      this.$emit("more", event);
    },
  },
  computed: {
    mainStyle(){
      let style = {'min-height':`${this.mainMaxHeight + 76}px`};
      if(this.height){
        style.height = `calc(${typeof this.height === 'number' ? this.height + 'px' : this.height} - 76px)`;
        if(this.showHeader){
          style.height = `calc(${this.height } - 56px)`;
        }
      }
      return style;
    },
    tabelHeight(){
      let height = 0;
      if(this.height){
        height = this.height;
        if(['auto', 'inherit', 'initial','100%'].includes(height)){
          height = this.mainMaxHeight;
        }else{
          if(typeof height === 'string'){
            height = parseInt(height.replace('px', ''));
          }
          height -= 76;
        }
      }else{
        height = this.mainMaxHeight;
      }
      if(height < this.mainMaxHeight){
        height = this.mainMaxHeight;
      }
      if(this.showHeader){
          height -= 56;
      }
      return height;
    }
  },
};
</script>

<style lang="scss" scoped>
.mainContainer {
  padding-bottom: 76px;
  position: relative;
  .card {
    font-family: Microsoft YaHei;
    :deep .el-card__header {
      width: 100%;
      height: 56px;
      background: linear-gradient(90deg, #6aa5ff 0%, #9fc9fc 100%);
      border: none;
      color: #ffffff;
      padding: 0 20px;
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 56px;
        .el-button--text span{
            width: 56px;
            color: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
      }
    }
    :deep .el-card__body {
      padding: 0;
      color: #3c4c70;
    }
    .container {
      min-height: 200px;
    }
  }
}
</style>
